<!-- eslint-disable max-len -->
<script setup lang="ts">
import { Ref, ref } from 'vue';

const disable = ref(false);
const readonly = ref(false);
const displayText = ref('');
const forcePlaceholder = ref(true);
const editable = ref(false);
const enableClear = ref(true);
const hiddenPanelOnClear = ref(true);
const multiSelect = ref(true);
const disabled = ref(false);
const separator = ref(',');
const enableTitle = ref(true);
const enableSearch = ref(false);
const remote = ref({
    url: 'https://www.fastmock.site/mock/360c703804de58adbc65e79c3db425c3/api/webadp/controllers/v1.0/educationentity',
    headers: { 'x-powered-by': 'farris-vue' },
    method: 'PUT',
    body: JSON.stringify({ userName: 'tom' })
});
const initValue = ref('item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10');

const data: Ref<any[]> = ref([]);
for (let index = 0; index < 15; index++) {
    const item = { valueField: `item${index}`, disabled: index % 3 === 0, textField: `类型${index}` };
    data.value.push(item);
}
function onClear(params: any) {
    console.log('clear');
}
function refreshData() {
    const newData = [];
    for (let index = 0; index < 10; index++) {
        const item = { valueField: `item${index}`, disabled: index % 3 === 0, textField: `类型${index}` };
        newData.push(item);
    }
    data.value = newData;
}
</script>

<template>
    <div style="padding: 10px">
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" v-model="editable" class="custom-control-input" id="editable" />
            <label class="custom-control-label" for="editable">允许编辑</label>
        </div>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" v-model="readonly" class="custom-control-input" id="readonly" />
            <label class="custom-control-label" for="readonly">只读</label>
        </div>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" v-model="disabled" class="custom-control-input" id="disabled" />
            <label class="custom-control-label" for="disabled">禁用</label>
        </div>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" v-model="forcePlaceholder" class="custom-control-input" id="forcePlaceholder" />
            <label class="custom-control-label" for="forcePlaceholder">强制显示占位符</label>
        </div>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" v-model="enableClear" class="custom-control-input" id="enableClear" />
            <label class="custom-control-label" for="enableClear">显示清空按钮</label>
        </div>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" v-model="multiSelect" class="custom-control-input" id="multiSelect" />
            <label class="custom-control-label" for="multiSelect">多选</label>
        </div>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" v-model="enableTitle" class="custom-control-input" id="enableTitle" />
            <label class="custom-control-label" for="enableTitle">显示提示</label>
        </div>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" v-model="enableSearch" class="custom-control-input" id="enableSearch" />
            <label class="custom-control-label" for="enableSearch">启用搜索</label>
        </div>
        <f-button style="margin: 5px" @click="refreshData()"> 更新数据源 </f-button>
    </div>

    <div style="padding: 10px; margin-bottom: 20px">分割符：<input type="text" v-model="separator" id="separator" /></div>
    当前值：{{ initValue }}
    <f-combo-list
        :disable="disable"
        :readonly="readonly"
        :disabled="disabled"
        :display-text="displayText"
        :force-placeholder="forcePlaceholder"
        placeholder="请选择"
        :editable="editable"
        :enable-clear="enableClear"
        :max-length="18"
        @clear="onClear"
        :data="data"
        :multi-select="multiSelect"
        :enable-title="enableTitle"
        :separator="separator"
        :enable-search="enableSearch"
        v-model="initValue"
        :value-field="'valueField'"
        :text-field="'textField'"
        :id-field="'valueField'"
    />
</template>
